<!--
 * @Author: huangyq
 * @Date: 2022-04-20 13:42:53
 * @LastEditTime: 2023-12-06 09:58:20
 * @LastEditors: hyq
 * @Description: your description
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/components/hq-sidebar/index.vue
-->
<template>
  <div class="hq-sidebar">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="hq-sidebar_el-menu-vertical"
      :default-active="defaultActive"
      text-color="#fff"
      :collapse="props.isCollapse"
    >
      <template v-for="menu in effectiveRoute" :key="menu.name">
        <sub-menu
          v-if="menu.children && menu.children.length > 0"
          :menu="menu"
        ></sub-menu>
        <menu-item v-else :menu="menu"></menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import { RouteRecordRaw, useRoute } from 'vue-router'
import SubMenu from './SubMenu.vue'
import MenuItem from './MenuItem.vue'
import { computed, ComputedRef } from 'vue'

interface IProps {
  menus: RouteRecordRaw[]
  isCollapse: boolean
}
const props = withDefaults(defineProps<IProps>(), {})

// 过滤 非sidebar
const effectiveRoute = computed(() => {
  return filterMenus(props.menus)
})
function filterMenus(list: RouteRecordRaw[]) {
  return list.filter(item => {
    if (item.children) {
      item.children = filterMenus(item.children)
    }
    return item.meta?.sidebar
  })
}

// active
const route = useRoute()
const defaultActive: ComputedRef<string> = computed(() => {
  return route.meta.sidebar
    ? (route.name as string)
    : (route.meta.active as string)
})
</script>
<style scoped lang="scss">
.hq-sidebar {
  width: 100%;
  height: 100%;
  &_el-menu-vertical {
    height: 100%;
    border: none;
    &--isCollapse {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>
